<template>
    <block>
        <scroll-view @scrolltolower="scrollToLower" style="height: 100vh" class="scroll_container" :scroll-y="true" @scroll="scroll">
            <view class="top_bar">
                <view class="top_bar_bg" :style="'opacity:' + topBarOpacity"></view>
                <view class="container">
                    <view class="search" @tap="searchFun">
                        <image class="search_icon" src="/static/images/search.png"></image>
                    </view>
                </view>
            </view>

            <!-- 轮播图 -->

            <swiper class="banner" :indicator-dots="true" indicator-active-color="#fff" :autoplay="true" :circular="true">
                <swiper-item :data-searchid="item.searchId" @tap="swiperClick" v-for="(item, index) in swiperImage" :key="index">
                    <image mode="aspectFill" :src="item.image"></image>
                </swiper-item>
            </swiper>

            <!-- 选框栏 -->
            <view class="top_nav">
                <view class="top_nav_item" v-for="(item, index) in topNavImage" :key="item.id">
                    <image @tap="ToDetailslist(item.text)" :src="item.image"></image>

                    <view class="text">{{ item.text }}</view>
                </view>
            </view>

            <!-- 礼品列 -->
            <view class="goods-list">
                <view class="goods" @tap="ToDetailsResult(item.product_id)" :id="item.product_id" :data-id="item.product_id" v-for="(item, index) in goodsList" :key="item.unique">
                    <image class="img" :src="'http://1.14.101.56:82/'+item.product_picture" mode="acpectFill"></image>

                    <text>{{ item.product_name}}</text>

                    <text style="color: red">\n ￥{{ item.product_selling_price }}</text>
                </view>
            </view>
        </scroll-view>
    </block>
</template>

<script>
export default {
    data() {
        return {
            swiperImage: [
                {
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/6.png?sign=616fa42d038616d0332085681490d830&t=1648456353',
                    searchId: 9321
                },
                {
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/7.png?sign=eb7eb62755cce3bf5c531d29e6ea1cec&t=1648456416',
                    searchId: 9343
                },
                {
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/8.png?sign=974eed82815dde543f13d0c9f956e057&t=1648456582',
                    searchId: 9512
                },
                {
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/mg.png?sign=299edcc00bad5267d2ddd850f52e4f5b&t=1648456637',
                    searchId: 9519
                }
            ],

            topNavImage: [
                {
                    id: '1',
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/shop.png?sign=f5c0374ea96562f2862def1f2f223df9&t=1647183641',
                    text: '礼品屋'
                },
                {
                    id: '2',
                    image: 'https://636c-cloud1-5gpfcg4741901b6a-1308173748.tcb.qcloud.la/packing%20bag.png?sign=b5d08c70969fbe71dc68918d9c6efc73&t=1647183674',
                    text: '礼品包装'
                }
               
            ],

            topBarOpacity: 0,
            goodsList: {},
            loading: true,
            pageNum: 1,
            noMore: false,
            pageNo: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad() {
		
        uni.request({
        	url:"/api/product/getAllProduct",
			method: "POST",
			success:(res) => {
                console.log('商品列表请求成功', res.data.Product);
                this.goodsList = res.data.Product
				
				// console.log(product_id)
            },
           fail:(res) =>{
                // console.log('商品列表请求失败', res);
           }
        })
          
		 
    },
    methods: {
        ToDetailslist: function (text) {
            // console.log(text);

            if (text === '礼品屋') {
                uni.navigateTo({
                    url: '../goods/goods'
                });
            } else{
				uni.navigateTo({
					url:"../Baoz/Baoz"
				})
			}
               
        },

        searchFun: function (e) {
            uni.navigateTo({
                url: '../search/search'
            });
        },

        ToDetailsResult: function (id) {
            uni.navigateTo({
                url: '/pages/goodsdetail/goodsdetail?id=' + id
            });
        },

        scroll: function (e) {
            var scrollTop = e.detail.scrollTop;

            if (scrollTop > 300) {
                scrollTop = 300;
            } else {
                scrollTop = scrollTop;
            }

            this.setData({
                topBarOpacity: scrollTop / 300
            });
        },

        scrollToLower: function (e) {
            if (!this.loading && !this.noMore) {
                this.setData({
                    loading: true,
                    pageNo: this.pageNum + 1
                });
                this.getData(true);
            }
        },

        swiperClick() {
            console.log('占位：函数 swiperClick 未声明');
        }
    }
};
</script>
<style>
page {
    background-color: #f4f4f4;
    height: 100%;
}
.scroll_container {
    height: 100%;
}

.top_bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    background: linear-gradient(#000, transparent);
}
.top_bar .top_bar_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.top_bar .container {
    display: flex;
    align-items: center;
	margin-top: 37px;
	background-color: #ef9b9b;
}
.top_bar .container .search {
    flex-grow: 1;
    height: 60rpx;
    background-color: #fff;
    border-radius: 60rpx;
    margin: 7px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}
.top_bar .container .search .logo {
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
}
.top_bar .container .search .search_icon {
    width: 28rpx;
    height: 28rpx;
    flex-shrink: 0;
    margin: 0 10px;
}
.top_bar .container .search input {
    font-size: 24rpx;
    flex-grow: 1;
}
.top_bar .container .register {
    color: #fff;
    font-size: 24rpx;
    margin-right: 10px;
}
.banner image {
    width: 100%;
    height: 100%;
}
.banner {
    height: 450rpx;
}
.top_nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: rgb(252,228,228);
}
.top_nav_item {
    text-align: center;
    width: 20%;
    margin: 12rpx 0;
}
.top_nav_item image {
    width: 80rpx;
    height: 80rpx;
}
.top_nav_item .text {
    font-size: 24rpx;
    color: #000;
}
.goods-list {
	background-color: #fff6f6;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
}
.goods-title {
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    padding-left: 10rpx;
}
.goods {
    background-color: white;
    border-radius: 10%;
    left: -12rpx;
    /* border: 1px solid #ccc; */
    width: 49%;
    font-size: 14px;
    margin: 2rpx;
    text-align: center;
}
.img {
    border-radius: 10%;
    width: 100%;
    height: 300rpx;
}
</style>
